<!DOCTYPE html>
<html>
<head>
	<title>Detail Admin - Tables showcase</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <!-- bootstrap -->
    <link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="css/compiled/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/compiled/elements.css" />
    <link rel="stylesheet" type="text/css" href="css/compiled/icons.css" />

    <!-- libraries -->
    <link href="css/lib/font-awesome.css" type="text/css" rel="stylesheet" />
    
    <!-- this page specific styles -->
    <link rel="stylesheet" href="css/compiled/tables.css" type="text/css" media="screen" />

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>

    <!-- navbar -->
    <header class="navbar navbar-inverse" role="banner">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" id="menu-toggler">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="logo" /></a>
        </div>
        <ul class="nav navbar-nav pull-right hidden-xs">
            <li class="hidden-xs hidden-sm">
                <input class="search" type="text" />
            </li>
            <li class="notification-dropdown hidden-xs hidden-sm">
                <a href="#" class="trigger">
                    <i class="icon-warning-sign"></i>
                    <span class="count">8</span>
                </a>
                <div class="pop-dialog">
                    <div class="pointer right">
                        <div class="arrow"></div>
                        <div class="arrow_border"></div>
                    </div>
                    <div class="body">
                        <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                        <div class="notifications">
                            <h3>You have 6 new notifications</h3>
                            <a href="#" class="item">
                                <i class="icon-signin"></i> New user registration
                                <span class="time"><i class="icon-time"></i> 13 min.</span>
                            </a>
                            <a href="#" class="item">
                                <i class="icon-signin"></i> New user registration
                                <span class="time"><i class="icon-time"></i> 18 min.</span>
                            </a>
                            <a href="#" class="item">
                                <i class="icon-envelope-alt"></i> New message from Alejandra
                                <span class="time"><i class="icon-time"></i> 28 min.</span>
                            </a>
                            <a href="#" class="item">
                                <i class="icon-signin"></i> New user registration
                                <span class="time"><i class="icon-time"></i> 49 min.</span>
                            </a>
                            <a href="#" class="item">
                                <i class="icon-download-alt"></i> New order placed
                                <span class="time"><i class="icon-time"></i> 1 day.</span>
                            </a>
                            <div class="footer">
                                <a href="#" class="logout">View all notifications</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="notification-dropdown hidden-xs hidden-sm">
                <a href="#" class="trigger">
                    <i class="icon-envelope"></i>
                </a>
                <div class="pop-dialog">
                    <div class="pointer right">
                        <div class="arrow"></div>
                        <div class="arrow_border"></div>
                    </div>
                    <div class="body">
                        <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                        <div class="messages">
                            <a href="#" class="item">
                                <img src="img/contact-img.png" class="display" alt="user" />
                                <div class="name">Alejandra Galván</div>
                                <div class="msg">
                                    There are many variations of available, but the majority have suffered alterations.
                                </div>
                                <span class="time"><i class="icon-time"></i> 13 min.</span>
                            </a>
                            <a href="#" class="item">
                                <img src="img/contact-img2.png" class="display" alt="user" />
                                <div class="name">Alejandra Galván</div>
                                <div class="msg">
                                    There are many variations of available, have suffered alterations.
                                </div>
                                <span class="time"><i class="icon-time"></i> 26 min.</span>
                            </a>
                            <a href="#" class="item last">
                                <img src="img/contact-img.png" class="display" alt="user" />
                                <div class="name">Alejandra Galván</div>
                                <div class="msg">
                                    There are many variations of available, but the majority have suffered alterations.
                                </div>
                                <span class="time"><i class="icon-time"></i> 48 min.</span>
                            </a>
                            <div class="footer">
                                <a href="#" class="logout">View all messages</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown">
                    Your account
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="personal-info.html">Personal info</a></li>
                    <li><a href="#">Account settings</a></li>
                    <li><a href="#">Billing</a></li>
                    <li><a href="#">Export your data</a></li>
                    <li><a href="#">Send feedback</a></li>
                </ul>
            </li>
            <li class="settings hidden-xs hidden-sm">
                <a href="personal-info.html" role="button">
                    <i class="icon-cog"></i>
                </a>
            </li>
            <li class="settings hidden-xs hidden-sm">
                <a href="signin.html" role="button">
                    <i class="icon-share-alt"></i>
                </a>
            </li>
        </ul>
    </header>
    <!-- end navbar -->

    <!-- sidebar -->
    <div id="sidebar-nav">
        <ul id="dashboard-menu">
            <li>                
                <a href="index.html">
                    <i class="icon-home"></i>
                    <span>Home</span>
                </a>
            </li>            
            <li>
                <a href="chart-showcase.html">
                    <i class="icon-signal"></i>
                    <span>Charts</span>
                </a>
            </li>
            <li>
                <a class="dropdown-toggle" href="#">
                    <i class="icon-group"></i>
                    <span>Users</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="user-list.html">User list</a></li>
                    <li><a href="new-user.html">New user form</a></li>
                    <li><a href="user-profile.html">User profile</a></li>
                </ul>
            </li>
            <li>
                <a class="dropdown-toggle" href="#">
                    <i class="icon-edit"></i>
                    <span>Forms</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="form-showcase.html">Form showcase</a></li>
                    <li><a href="form-wizard.html">Form wizard</a></li>
                </ul>
            </li>
            <li>
                <a href="gallery.html">
                    <i class="icon-picture"></i>
                    <span>Gallery</span>
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="icon-calendar-empty"></i>
                    <span>Calendar</span>
                </a>
            </li>
            <li class="active">
                <a class="dropdown-toggle" href="tables.html">
                    <div class="pointer">
                        <div class="arrow"></div>
                        <div class="arrow_border"></div>
                    </div>
                    <i class="icon-th-large"></i>
                    <span>Tables</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="active submenu">
                    <li><a href="tables.html" class="active">Custom tables</a></li>
                    <li><a href="datatables.html">DataTables</a></li>
                </ul>
            </li>
            <li>
                <a class="dropdown-toggle ui-elements" href="#">
                    <i class="icon-code-fork"></i>
                    <span>UI Elements</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="ui-elements.html">UI Elements</a></li>
                    <li><a href="icons.html">Icons</a></li>
                </ul>
            </li>
            <li>
                <a href="personal-info.html">
                    <i class="icon-cog"></i>
                    <span>My Info</span>
                </a>
            </li>
            <li>
                <a class="dropdown-toggle" href="#">
                    <i class="icon-share-alt"></i>
                    <span>Extras</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="code-editor.html">Code editor</a></li>
                    <li><a href="grids.html">Grids</a></li>
                    <li><a href="signin.html">Sign in</a></li>
                    <li><a href="signup.html">Sign up</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end sidebar -->


	<!-- main container -->
    <div class="content">
        
        <!-- settings changer -->
        <div class="skins-nav">
            <a href="#" class="skin first_nav selected">
                <span class="icon"></span><span class="text">Default</span>
            </a>
            <a href="#" class="skin second_nav" data-file="css/compiled/skins/dark.css">
                <span class="icon"></span><span class="text">Dark skin</span>
            </a>
        </div>
        
        <div id="pad-wrapper">
            
            <!-- products table-->
            <!-- the script for the toggle all checkboxes from header is located in js/theme.js -->
            <div class="table-wrapper products-table section">
                <div class="row head">
                    <div class="col-md-12">
                        <h4>Products</h4>
                    </div>
                </div>

                <div class="row filter-block">
                    <div class="pull-right">
                        <div class="ui-select">
                            <select>
                              <option>Filter users</option>
                              <option>Signed last 30 days</option>
                              <option>Active users</option>
                            </select>
                        </div>
                        <input type="text" class="search">
                        <a class="btn-flat success new-product">+ Add product</a>
                    </div>
                </div>

                <div class="row">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="col-md-3">
                                    <input type="checkbox">
                                    Product
                                </th>
                                <th class="col-md-3">
                                    <span class="line"></span>Description
                                </th>
                                <th class="col-md-3">
                                    <span class="line"></span>Status
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- row -->
                            <tr class="first">
                                <td>
                                    <input type="checkbox">
                                    <div class="img">
                                        <img src="img/table-img.png" alt="pic" />
                                    </div>
                                    <a href="#" class="name">Generate Lorem </a>
                                </td>
                                <td class="description">
                                    if you are going to use a passage of Lorem Ipsum.
                                </td>
                                <td>
                                    <span class="label label-success">Active</span>
                                    <ul class="actions">
                                        <li><a href="#">Edit</a></li>
                                        <li class="last"><a href="#">Delete</a></li>
                                    </ul>
                                </td>
                            </tr>
                            <!-- row -->
                            <tr>
                                <td>
                                    <input type="checkbox">
                                    <div class="img">
                                        <img src="img/table-img.png" alt="pic" />
                                    </div>
                                    <a href="#" class="name">Internet tend</a>
                                </td>
                                <td class="description">
                                    There are many variations of passages.
                                </td>
                                <td>
                                    <ul class="actions">
                                        <li><a href="#">Edit</a></li>
                                        <li class="last"><a href="#">Delete</a></li>
                                    </ul>
                                </td>
                            </tr>
                            <!-- row -->
                            <tr>
                                <td>
                                    <input type="checkbox">
                                    <div class="img">
                                        <img src="img/table-img.png" alt="pic" />
                                    </div>
                                    <a href="#" class="name">Generate Lorem </a>
                                </td>
                                <td class="description">
                                    if you are going to use a passage of Lorem Ipsum.
                                </td>
                                <td>
                                    <ul class="actions">
                                        <li><a href="#">Edit</a></li>
                                        <li class="last"><a href="#">Delete</a></li>
                                    </ul>
                                </td>
                            </tr>
                            <!-- row -->
                            <tr>
                                <td>
                                    <input type="checkbox">
                                    <div class="img">
                                        <img src="img/table-img.png" alt="pic" />
                                    </div>
                                    <a href="#" class="name">Internet tend</a>
                                </td>
                                <td class="description">
                                    There are many variations of passages.
                                </td>
                                <td>
                                    <span class="label label-info">Standby</span>
                                    <ul class="actions">
                                        <li><a href="#">Edit</a></li>
                                        <li class="last"><a href="#">Delete</a></li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox">
                                    <div class="img">
                                        <img src="img/table-img.png" alt="pic" />
                                    </div>
                                    <a href="#" class="name">Generate Lorem </a>
                                </td>
                                <td class="description">
                                    if you are going to use a passage of Lorem Ipsum.
                                </td>
                                <td>
                                    <span class="label label-success">Active</span>
                                    <ul class="actions">
                                        <li><a href="#">Edit</a></li>
                                        <li class="last"><a href="#">Delete</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end products table -->

            <!-- orders table -->
            <div class="table-wrapper orders-table section">
                <div class="row head">
                    <div class="col-md-12">
                        <h4>Orders</h4>
                    </div>
                </div>

                <div class="row filter-block">
                    <div class="pull-right">
                        <div class="btn-group pull-right">
                            <button class="glow left large">All</button>
                            <button class="glow middle large">Pending</button>
                            <button class="glow right large">Completed</button>
                        </div>
                        <input type="text" class="search order-search" placeholder="Search for an order.." />
                    </div>
                </div>

                <div class="row">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="col-md-2">
                                    Order ID
                                </th>
                                <th class="col-md-2">
                                    <span class="line"></span>
                                    Date
                                </th>
                                <th class="col-md-2">
                                    <span class="line"></span>
                                    Name
                                </th>
                                <th class="col-md-2">
                                    <span class="line"></span>
                                    Status
                                </th>
                                <th class="col-md-2">
                                    <span class="line"></span>
                                    Items
                                </th>
                                <th class="col-md-2">
                                    <span class="line"></span>
                                    Total amount
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- row -->
                            <tr class="first">
                                <td>
                                    <a href="#">#459</a>
                                </td>
                                <td>
                                    Jan 03, 2013
                                </td>
                                <td>
                                    <a href="#">John Smith</a>
                                </td>
                                <td>
                                    <span class="label label-success">Completed</span>
                                </td>
                                <td>
                                    3
                                </td>
                                <td>
                                    $ 3,500.00
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#">#510</a>
                                </td>
                                <td>
                                    Feb 22, 2013
                                </td>
                                <td>
                                    <a href="#">Anna Richards</a>
                                </td>
                                <td>
                                    <span class="label label-info">Pending</span>
                                </td>
                                <td>
                                    5
                                </td>
                                <td>
                                    $ 800.00
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#">#590</a>
                                </td>
                                <td>
                                    Mar 03, 2013
                                </td>
                                <td>
                                    <a href="#">Steven McFly</a>
                                </td>
                                <td>
                                    <span class="label label-success">Completed</span>
                                </td>
                                <td>
                                    2
                                </td>
                                <td>
                                    $ 1,350.00
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#">#618</a>
                                </td>
                                <td>
                                    Jan 03, 2013
                                </td>
                                <td>
                                    <a href="#">George Williams</a>
                                </td>
                                <td>
                                    <span class="label">Canceled</span>
                                </td>
                                <td>
                                    8
                                </td>
                                <td>
                                    $ 3,499.99
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end orders table -->

            <!-- users table -->
            <div class="table-wrapper users-table section">
                <div class="row head">
                    <div class="col-md-12">
                        <h4>Users</h4>
                    </div>
                </div>

                <div class="row filter-block">
                    <div class="pull-right">
                        <a class="btn-flat pull-right success new-product add-user">+ Add user</a>
                        <input type="text" class="search user-search" placeholder="Search for users.." />
                    </div>
                </div>

                <div class="row">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="col-md-4">
                                    Name
                                </th>
                                <th class="col-md-3">
                                    <span class="line"></span>Signed up
                                </th>
                                <th class="col-md-2">
                                    <span class="line"></span>Total spent
                                </th>
                                <th class="col-md-3 align-right">
                                    <span class="line"></span>Email
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- row -->
                            <tr class="first">
                                <td>
                                    <img src="img/contact-img.png" alt="avatar" class="img-circle avatar hidden-phone" />
                                    <a href="user-profile.html" class="name">Alejandra Galvan Castillo</a>
                                    <span class="subtext">Graphic Design</span>
                                </td>
                                <td>
                                    Jan 11, 2012
                                </td>
                                <td>
                                    $ 500.00
                                </td>
                                <td class="align-right">
                                    <a href="#">alejandra@gmail.com</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="img/contact-img2.png" alt="avatar" class="img-circle avatar hidden-phone" />
                                    <a href="user-profile.html" class="name">Alejandra Galvan Castillo</a>
                                    <span class="subtext">Graphic Design</span>
                                </td>
                                <td>
                                    Apr 23, 2012
                                </td>
                                <td>
                                    $ 3,210.00
                                </td>
                                <td class="align-right">
                                    <a href="#">alejandra@gmail.com</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="img/contact-img.png" alt="avatar" class="img-circle avatar hidden-phone" />
                                    <a href="user-profile.html" class="name">Alejandra Galvan Castillo</a>
                                    <span class="subtext">Graphic Design</span>
                                </td>
                                <td>
                                    Feb 03, 2013
                                </td>
                                <td>
                                    $ 890.00
                                </td>
                                <td class="align-right">
                                    <a href="#">alejandra@gmail.com</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="img/contact-img2.png" alt="avatar" class="img-circle avatar hidden-phone" />
                                    <a href="user-profile.html" class="name">Alejandra Galvan Castillo</a>
                                    <span class="subtext">Graphic Design</span>
                                </td>
                                <td>
                                    Sep 19, 2012
                                </td>
                                <td>
                                    $ 899.99
                                </td>
                                <td class="align-right">
                                    <a href="#">alejandra@gmail.com</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end users table -->
        </div>
    </div>
    <!-- end main container -->

	<!-- scripts -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/theme.js"></script>
</body>
</html>